<template>
  <div>
    <el-card style="margin: 20px">
      <div>
        <!-- 按钮 -->
        <el-button
          class="add-btn"
          @click="$router.push('/info/goods/details/null')"
        >
          新增货品
        </el-button>
        <!-- 表格 -->
        <el-table :data="tableData" border style="width: 70vw" stripe>
          <el-table-column
            align="center"
            fixed
            label="序号"
            width="50"
            type="index"
          />
          <el-table-column
            align="center"
            prop="goodsTypeName"
            label="货品类型名称"
            width="120"
          />
          <el-table-column
            align="center"
            prop="code"
            label="货品编号"
            width="100"
          />
          <el-table-column
            align="center"
            prop="barCode"
            label="货品条码"
            width="100"
          />
          <el-table-column
            align="center"
            prop="name"
            label="货品名称"
            width="120"
          />
          <el-table-column
            align="center"
            prop="ownerName"
            label="货主名称"
            width="120"
          />
          <el-table-column
            align="center"
            prop="inspectionType"
            label="质检方式"
            width="120"
          >
            <template slot-scope="scope">
              {{ inspectionType(scope.row.inspectionType) }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="temperatureType"
            label="温度要求"
            width="120"
          >
            <template slot-scope="scope">
              {{ temperatureType(scope.row.temperatureType) }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="bearingType"
            label="承重要求"
            width="100"
          >
            <template slot-scope="scope">
              {{ bearingType(scope.row.bearingType) }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="areaName"
            label="指定库区"
            width="100"
          />
          <el-table-column
            align="center"
            prop="volume"
            label="体积/m³"
            width="100"
          />
          <el-table-column
            align="center"
            prop="price"
            label="单价/元"
            width="100"
          />
          <el-table-column align="center" prop="unit" label="单位" width="60" />
          <el-table-column
            align="center"
            prop="guaranteeDay"
            label="保质天数（天）"
            width="120"
          />
          <el-table-column
            align="center"
            prop="updateTime"
            label="更新时间"
            width="180"
          />
          <el-table-column
            align="center"
            fixed="right"
            label="操作"
            width="120"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="$router.push(`/info/goods/details/${scope.row.id}`)"
              >
                编辑
              </el-button>
              <el-button
                type="text"
                size="small"
                @click="deleteGoods(scope.row.id)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页器 -->
      <el-pagination
        :page-sizes="[5, 10, 20, 40]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>
<script>
import { getGoodsPage, delGoods } from '@/api/goods'
import { inspectionType, temperatureType, bearingType } from '../table-data-computed'
export default {
  data() {
    return {
      tableData: [],
      pageConfig: { current: 1, size: 5 },
      total: 0
    }
  },
  computed: { inspectionType, temperatureType, bearingType },
  created() {
    this.getData()
  },
  methods: {
    // 删除货品
    deleteGoods(id) {
      delGoods(id)
      this.$message.success('删除成功')
    },
    // 获取货品分页数据
    async getData(searchQuery = '') {
      const res = await getGoodsPage(this.pageConfig, searchQuery)
      const { records, total, cuttent, size } = res.data.data
      this.tableData = records
      this.total = Number(total)
      this.pageConfig.current = cuttent
      this.pageConfig.size = size
    },
    // 分页器方法
    handleSizeChange(val) {
      this.pageConfig.size = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.pageConfig.current = val
      this.getData()
    },
    // 表格方法
    handleClick(row) {
    }
  }
}
</script>
<style scoped lang="scss">
@import "@/styles/table.scss";
</style>
